<!DOCTYPE html>
<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | US Cities By Population</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />
    
    <link href="cities.js" type="application/json" rel="exhibit/data" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/exhibit-api.js -->
    <script src="../api/exhibit-api.js"></script>
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/extensions/map/map-extension.js -->
    <link rel="exhibit-extension" href="../api/extensions/map/map-extension.js" data-ex-apikey="AIzaSyCDO3EXWKJms5T38db48czFJZDunhYIzn8" />
    <!-- Replace the above apiKey with your own (this one will eventually stop working) -->
  </head>
  <body>
    <ul id="path">
      <li><a href="/">SIMILE Widgets</a></li>
      <li><a href="/exhibit/">Exhibit</a></li>
      <li><a href="..">Demos</a></li>
      <li><span>Examples: US Cities by Population</span></li>
    </ul>
    <div id="header">
      <h1>US Cities by Population</h1>
      <p style="width: 35em;">
        Using <a href="http://simile-widgets.org/exhibit/">Exhibit</a>, you can make this map
        with just the two simple files you see in <a href="./">this directory</a>.
        Could you have built the same map with as little effort using anything else?
      </p>
    </div>
    <div id="content">
      <div data-ex-role="coder" data-ex-coder-class="SizeGradient" id="pop-coder"
           data-ex-gradient-points="0, 10; 10000000, 100" >
      </div>
      <div data-ex-role="view"
           data-ex-view-class="Map"
           data-ex-label="Cities"
           data-ex-latlng=".latlng"
           data-ex-size-key=".pop"
	   data-ex-pin="false"
           data-ex-size-coder="pop-coder"
           data-ex-size-legend-label="Population"
           data-ex-center="38.62756, -90.19896"
           data-ex-zoom="4"
           data-ex-map-height="500"
           data-ex-show-header="false"
           >
        <div class="map-lens" data-ex-role="lens" style="display: none;">
          <div>#<span data-ex-content=".rank"></span>. <b data-ex-content=".label"></b></div>
          <div><span data-ex-content=".pop"></span> people</div>
        </div>
      </div>
    </div>
  </body>
</html>
